<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/weixin_utils.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function(){
				// 发送好友请求
				document.getElementById("send_btn").addEventListener("tap",function(){
					var fid = plus.webview.currentWebview().fid;
					var apply_msg = document.getElementById("text1").value;
					var remark = document.getElementById("text2").value;
					// 请求接口
					util.ajax({
						url: api.addFriend,
						data: {
							"apply_msg": apply_msg,
							"fid": fid,
							"remark": remark
						},
						success: function(resp) {
							if (resp.code == 200 && resp.httpCode == 200) {
								// 发送成功
								// 打开好友申请页
								plus.webview.open('new_friend.html','new_friend.html');
							} else if(resp.code == 1){
								plus.nativeUI.toast(resp.msg);
							}
						}
					})
				})
			})
		</script>
	</head>

	<body style="background-color: #fff;">
		<header class="mui-bar mui-bar-nav" style="box-shadow: none;background-color: #fff;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">申请添加朋友</h1>
		</header>
		
		<div style="margin-top: 50px;" class="container">
			<label for="">发送添加朋友申请</label>
			<div style="text-align: center;">
				<textarea name="" id="text1" cols="30" rows="3" maxlength="80"></textarea>
			</div>
			<label for="">设置备注</label>
			<div style="text-align: center;">
				<textarea name="" id="text2" cols="30" rows="1" maxlength="15"></textarea>
			</div>
		</div> 
		
		<div class="mui-button-row">
			<button type="button" id="send_btn" class="mui-btn mui-btn-success">发送</button>
		</div> 
	</body>

</html>

<style type="text/css">
	.container {
		position: relative;
		height: 100vh; /* 使容器高度为视口高度 */
	}
	
	label{
		width: 100%;
		padding-left: 40px;
		font-size: 13px;
		display: inline-block;
		color: #666;
	}
	
	#text1{
		width: 90%;
		border-radius: 10px;
		border: none;
		background-color: #eeeeee;
		height: 120px;
	}
	
	#text2{
		width: 90%;
		border-radius: 10px;
		border: none;
		background-color: #eeeeee;
		height: 50px;
	}
	
	#send_btn{
		width: 35%;
		height: 40px;
		background-color: #1ba616;
		border: none;
		color: #fff;
		border-radius: 6px;
		position: absolute;
		bottom: 100px;
		left: 50%;
		font-size: 16px;
		transform: translateX(-50%); /* 水平居中 */
	}
</style>